<template>
<div class="ml-4em mt-4em">
  <h3>单选按钮</h3>

  <radio-button :radio-list="radioList" v-model="radioValue"></radio-button>

  <p>选中的按钮value为<span class="radio-value ml-1em">{{radioValue}}</span></p>
</div>
</template>

<script>
import RadioButton from '@/components/RadioButton'
export default {
  name: "index",
  components: {
    RadioButton
  },
  data(){
    return {
      radioValue: 'sm',
      radioList: [
        {
          label: '小号',
          value: 'sm'
        },
        {
          label: '中号',
          value: 'md'
        },
        {
          label: '大号',
          value: 'lg'
        }
      ]
    }
  }

}
</script>

<style scoped>
.radio-value {
  color: red;
  font-size: 1.2em;
}
</style>